<style lang="scss" scoped>
.samplefile{
    min-height:50px;
    _height:50px;
    position: relative;
}
</style>

<template>
    <Modal v-model="modalShow"  width="835px" title="样本编号：" :mask-closable="false" @on-cancel='closeModal()'>
        <div class='samplefile'>
            <el-table v-if="!isWarn" v-loading="loading" element-loading-text="数据加载中，请稍后" :data='sampleInfo' border style="width: 100%">
                <el-table-column label="文件名" prop="filename"></el-table-column>
                <el-table-column label="文件大小" prop="size"></el-table-column>
                <el-table-column label="测序类型" prop="region"></el-table-column>
                <el-table-column label="上传日期" prop="uploaddate"></el-table-column>
                <el-table-column label="文件状态" prop="status">
                    <template slot-scope='scope'>
                        {{scope.row.status | dataFormat}}
                    </template>
                </el-table-column>
                <div slot="empty"></div>
            </el-table> 
            <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>  
            <warn v-if="isWarn" @callback="getFileList"></warn>
        </div>
        <div slot='footer'></div>
    </Modal>
</template>
<script>
import {
    data
} from 'api/index.js';
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
import warn from '@/components/warn.vue';
export default {
    name: 'sampleFile',
    props: ['message'],
    data() {
        return {
            loading:false,
            emptyShow:false,
            isWarn:false,
            modalShow: true,              //弹层显示
            sampleNum: '',                //样本编号
            sampleInfo: []
        }
    },
    filters: {
        // 格式化数据
        dataFormat(cellValue) {
            if (cellValue == '0') {
                return cellValue = "----"
            } else if (cellValue == '1') {
                return cellValue = "上传中"
            } else if (cellValue == '2') {
                return cellValue = "上传完成"
            } else if (cellValue == '3') {
                return cellValue = "上传失败"
            } else if (cellValue == '4') {
                return cellValue = "错误"
            } else if (cellValue == '6') {
                return cellValue = "未执行"
            } else if (cellValue == '5') {
                return cellValue = "vcf文件已存在"
            }
        },
    },
    methods: {
        closeModal() {
            this.$emit('modalshowEvent')
        },
        // 获取样本文件数据
        getFileList() {
            this.sampleInfo = [];
            let obj = {
                userId: getCookie("userid"),
                sampleid: this.message.sampleid,
                productId: this.$store.state.productId
            }
            this.loading = true;
            data.getFileList(obj).then((data) => {
                if (data.returnCode == 0 || data.returnCode == 200) {
                    if (data.data != null || data.data != 'null') {
                        // data.data.filter( res => {
                        //     res.fileModel.filter( o => {
                        //         this.sampleInfo.push(o)
                        //     })
                        // })
                        this.sampleInfo = data.data
                    }
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }
                this.loading = false;
                this.isWarn = false;
                if(this.sampleInfo==null || this.sampleInfo.length==0){
                    this.emptyShow=true;
                }else{
                    this.emptyShow = false;
                }
            }).catch((error) => {
                this.loading = false;
                this.isWarn = true;
            })
        }
    },
    components:{
        warn
    },
    mounted() {
        this.getFileList()
    }
}
</script>

